<template>
  <div class="status">
    <lRTitle :text="statusTitle"></lRTitle>
    <div class="statusContainer">
      <div class="leftUp">
        <img src="@/assets/aiScreen/zkzl.png" alt="zkzl" />
        <div class="text">
          <span class="title1">智库总量</span>
          <span class="data">{{ kbStatus.ClassTotal }}</span>
        </div>
      </div>
      <div class="leftDown">
        <img src="@/assets/aiScreen/xlzl.png" alt="xlzl" />
        <div class="text">
          <span class="title2">今日增加</span>
          <span class="data">{{ kbStatus.TrainTodayAdd }} </span>
        </div>
      </div>
      <div class="rightUp">
        <img src="@/assets/aiScreen/jrzj.png" alt="jrzj" />
        <div class="text">
          <span class="title1">训练总量</span>
          <span class="data">{{ kbStatus.TrainTotal }} </span>
        </div>
      </div>
      <div class="rightDown">
        <img src="@/assets/aiScreen/jrxl.png" alt="jrxl" />
        <div class="text">
          <span class="title2">今日训练</span>
          <span class="data">{{ kbStatus.TrainTodayFinish }} </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import lRTitle from "./lRTitle.vue";
import { connrequest } from "@/api/firstPage";
export default {
  name: "libStatus",
  components: {
    lRTitle
  },
  data() {
    return {
      statusTitle: "企智库状态",
      kbStatus: {}
    };
  },
  mounted() {
    this.getknowledgeBaseStatus();
  },
  methods: {
    async getknowledgeBaseStatus() {
      const res = await connrequest("GetknowledgeBaseStatus");
      if (res.Status.StatusCode === 0) {
        this.kbStatus = res.Data;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.status {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  width: 100%;
  /* background-color: antiquewhite; */
  height: 20%;
}
.statusContainer {
  display: grid;
  overflow: auto;
  flex: 1;
  grid-template-areas:
    "leftUp    rightUp"
    "leftDown  rightDown";
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 0 15px 10px 40px;
  img {
    margin-right: 5px;
  }
}
.leftUp,
.leftDown,
.rightUp,
.rightDown {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.leftUp {
  grid-area: leftUp;
}
.rightUp {
  grid-area: rightUp;
}
.leftDown {
  grid-area: leftDown;
}
.rightDown {
  grid-area: rightDown;
}
.text {
  display: flex;
  padding: 10px 0;
  margin-top: 5px;
  width: 100%;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  margin-left: 10px;
}
.title1::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -3px;
  width: 100%;
  height: 132%;
  background-image: url("../../../assets/aiScreen/wz_bg.png");
  background-repeat: no-repeat;
}
.title2::before {
  content: "";
  position: absolute;
  left: -10px;
  top: -3px;
  width: 100%;
  height: 132%;
  background-image: url("../../../assets/aiScreen/wz_bg2.png");
  background-repeat: no-repeat;
}
.title1,
.title2 {
  position: relative;
  font-size: 14px;
  color: #fff;
}
.data {
  font-size: 16px;
  margin: 5px 0 0 2px;
  color: #fff;
}
.total {
  display: flex;
  flex-direction: row;
}
.totalText {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
</style>
